<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值表达式{{}}</title>
</head>

<body>
    <!-- 
     插值表达式：vue的一种模版语法
     作用：利用 表达式 进行插值渲染页面
     语法：{{表达式}}

     注意点：
       1.使用的数据必须存在data中
       2.支持的是表达式，而非 语句 if...else
       3.不能在标签属性里面使用
    -->
    <div id="app">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>是否成年：{{age>=18?'成年':'未成年'}}</p>
        <p>{{'你好啊'+friend.name+'我是'+name}}</p>
        <p>{{friend.age}}</p>


        <!-- 这里就会报错 因为sex  data的数据里面没sex -->
        <!-- <p>{{sex}}</p>  -->


        <!-- <p>{{if}}</p> 不能再插值表达式里面写表达式之外的语句 -->

        <!-- 不能再标签属性里面使用  要用v-bind -->
        <!-- <p title="{{name}}">{{name}}</p> -->
    </div>

    <script src="./script/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: 'zty',
                age: 25,
                friend: {
                    name: 'wyf',
                    age: 24
                }
            }
        })
    </script>
</body>

</html>